<template lang="pug">
  div.ivu-table-wrapper.custom-table-header(style="width:100%;overflow:hidden;")
    div.ivu-table
      div.ivu-table-header(:style="{width:width+'px'}")
        table(style="width:0")
          colgroup
            col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
          thead
            tr(v-for="row in rows")
              th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                div.ivu-table-cell
                  span(v-if="col.type!=='selection'") {{col.title}}
                  Checkbox(v-else v-model="all")
      div.fixed-header.fixed-header-left(v-if="fixedLeftWidth" :style="{width:fixedLeftWidth+'px'}")
        div.ivu-table-header(:style="{width:width+'px'}")
          table(style="width:0")
            colgroup
              col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
            thead
              tr(v-for="row in rows")
                th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                  div.ivu-table-cell
                    span(v-if="col.type!=='selection'") {{col.title}}
                    Checkbox(v-else v-model="all")
      div.fixed-header.fixed-header-right(v-if="fixedRightWidth" :style="{width:fixedRightWidth+'px'}")
        div.ivu-table-header(:style="{width:width+'px'}")
          table(style="width:0")
            colgroup
              col(v-for="(obj,$index) in columnsWidth" :width="getColWidth(obj,$index)")
            thead
              tr(v-for="row in rows")
                th(v-for="col in row" :colspan="col._colspan" :rowspan="col._rowspan" :style="{textAlign:col.align || 'center'}")
                  div.ivu-table-cell
                    span(v-if="col.type!=='selection'") {{col.title}}
                    Checkbox(v-else v-model="all")
</template>

<script>
import _ from 'lodash';
const scrollbarWidth = 18;
// 获取层级深度
var getDepth = columns => {
  let depth = 0;
  const recursion = (cols, level) => {
    level++;
    if (level > depth) {
      depth = level;
    }
    _.each(cols, col => {
      if (col.children && col.children.length > 0) {
        recursion(col.children, level);
      }
    });
  };
  columns && columns.length > 0 && recursion(columns, depth);
  return depth;
};
// 获取广度
const getWide = columns => {
  let wide = 0;
  _.each(columns, col => {
    if (col.children) {
      wide += getWide(col.children);
    } else {
      wide++;
    }
  });
  return wide;
};

export default {
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number,
      default() {
        return null;
      }
    },
    columnsWidth: {
      type: Object,
      default() {
        return Object.create(null);
      }
    }
  },
  data() {
    return {
      fixedRightWidth: 0,
      fixedLeftWidth: 0,
      all: false
    };
  },
  computed: {
    cloneColumns() {
      return _.cloneDeep(this.columns);
    },
    depth() {
      return getDepth(this.cloneColumns);
    },
    wide() {
      return this.rows[this.rows.length - 1].length;
    },
    rows() {
      return this.getRows(this.cloneColumns);
    },
    tableWidth() {
      return _.reduce(
        this.columnsWidth,
        (result, value) => {
          return result + value.width;
        },
        0
      );
    }
  },
  watch: {
    all(nv) {
      this.$emit('on-toggle-all', nv);
    },
    columnsWidth() {
      _.delay(this.setFixedHeaderWidth.bind(this), 200);
    }
  },
  mounted() {
    _.delay(this.setFixedHeaderWidth.bind(this), 200);
  },
  methods: {
    getRows(columns, rows, pCol = null) {
      if (!rows) {
        rows = _.repeat(',', this.depth)
          .split('')
          .map(d => []);
      }
      _.each(
        columns,
        function(col) {
          const curRow = _.get(pCol, '_curRow', 1); // 当前到达的第几行
          col._depth = getDepth(col.children) + 1; // 该列的深度
          col._rowspan = this.depth - (curRow - 1) - col._depth + 1; // 该列的rowsspan
          col._colspan = getWide(col.children || []);
          col._curRow = curRow + col._rowspan;
          rows[curRow - 1].push(col);
          if (col.children) {
            this.getRows(col.children, rows, col);
          }
        }.bind(this)
      );
      return rows;
    },
    getColWidth(obj, index) {
      let width = obj.width;
      if (_.last(_.keys(this.columnsWidth)) === index) {
        width += scrollbarWidth;
      }
      return width;
    },
    setFixedHeaderWidth() {
      if (this.$parent.$el) {
        const elL = this.$parent.$el.querySelector('.ivu-table-fixed');
        if (elL) {
          this.fixedLeftWidth = elL.clientWidth;
        }
        const elR = this.$parent.$el.querySelector('.ivu-table-fixed-right');
        if (elR) {
          this.fixedRightWidth = elR.clientWidth;
        }
      }
    }
  }
};
</script>

<style lang="less">
.custom-table-header {
  table {
    border-collapse: collapse;
    table-layout: fixed;
    th {
      border-right: 1px solid #e3e8ee;
    }
  }
  .fixed-header {
    position: absolute;
    top: 0;
    overflow: hidden;
  }
  .fixed-header-left {
    left: 0;
    box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
  }
  .fixed-header-right {
    right: 0;
    box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
    .ivu-table-header {
      float: right;
    }
  }
}
</style>
